<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        // class App extends React.Component{
        //     state={
        //         count:0
        //     }
        //     render(){

        //         const {count}=this.state
        //         return (
        //             <div>
        //              <button onClick={this.handle}>+</button>
        //              <p>{count}</p>   
        //             </div>
        //         )
        //     }
        //     handle(){
        //         alert(1)
        //         console.log(this);//undfined
        //     }

        // }  


        // class App extends React.Component{
        // constructor(){
        //     super();
                // 在实例对象身上添加一个handle属性，实例对象上没有handle所以这个this.handle是原型上的handle,bind后面的this是修改为实例对象的this
        //     this.handle  =  this.handle.bind(this)
        // }

        //     state={
        //         count:0
        //     }
        //     render(){

        //         const {count}=this.state
        //         return (
        //             <div>
        //              <button onClick={this.handle}>+</button>
        //              <p>{count}</p>   
        //             </div>
        //         )
        //     }
        //     //事件函数
        //     handle(){
        //         alert(1)
        //         //在组件中,我们希望事件函数的this指向组件实例,这样可以拿到state等各种数据
        //         console.log(this);
        //     }

        // }  

// class App extends Reate.Component{
// constructor(){
//     super()
//     this.handle = this.handle.bind(this)
// }
//     state = {
//         count:0
//       }

//       render(){
//         const {count} = this.state;
//         return (
//           <div>
//             <button onClick={this.handle} >+</button>
//             <p>{count}</p>
//           </div>
//         )
//       }
// //事件函数
// handle(){
//         alert(1)
//         //在组件中,我们希望事件函数的this指向组件实例,这样可以拿到state等各种数据
//         console.log(this);
//       }
      
// }

// class App extends React.component{
// constructor(){
//     super()
//     this.handle=this.handle.bind(this)

// }

// state={
//     count:0
// }
// render(){
//     const{count}=this.state
//     return (
//         <div>
//             <button onClick={this.handle} >+</button>
//             <p>{count}</p>
//           </div> 
//     )
// }

// handle(){
//     alert(1)
//     console.log(this);
// }


// }



        // 最终版本
            // class App extends React.Component{
            // state={
            //     count:0
            // }
            // render(){
            //     const{count}=this.state
            //     return (
            // <div>
            //     <button onClick={this.handle}>+</button>
            //     <p>{count}</p>
            //     </div>

            //     )
            // }
            //     // 事件函数
            // handle=()=>{
            //     //当前this再箭头函数中，所以出去找this指向了，找到了App类，因为类其实就是构造函数，构造函数的this指向实例化对象，所以这个this指向实例化对象
            //     console.log(this);
            // }



            // }

        //     class App extends React.Component{
    
        //     state = {
        //     count:0
        //     }

        //     render(){
        //     const {count} = this.state;
        //     return (
        //         <div>
        //         <button onClick={this.handle} >+</button>
        //         <p>{count}</p>
        //         </div>
        //     )
        //     }

        //     //事件函数
        //     handle = () => {
        //     //当前this再箭头函数中，所以出去找this指向了，找到了App类，因为类其实就是构造函数，构造函数的this指向实例化对象，所以这个this指向实例化对象
        //     console.log(this);
        //     }
        // }


        class App extends Reate.Component{
        state={
            count:0
        }
        render(){
            const{count}=this.state
        return (
            <div>
                    <button onClick={this.handle} >+</button>
                    <p>{count}</p>
                </div>
        )


        }

        handle=()=>{
            console.log(this);
        }

        }

        const root=ReactDOM.createRoot(document.getElementById("app"))
        root.render(<App/>)
   










  </script>
</body>

</html>